<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>延迟动态特效载入特效JS</title>

    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
        }

        nav {
            width: 800px;
            margin: 0 auto;
        }

        /* nav */
        .header-nav-area {
            height: 99px;
        }

        .header-nav-area nav {
            width: 75%;
            display: inline-block;
        }

        .header-nav-area .menu>li {
            font-size: 18px;
            line-height: 60px;
            height: 60px;
            display: inline-block;


        }

        .header-nav-area nav>li a {
            display: block;
            padding: 8px 6px 20px;
            margin: 0 14px;
            font-weight: 700;
            z-index: 0;
            font-size: 18px;
            line-height: 26px;
        }

        .header-nav-area nav li a:hover {
            color: #ff622d;
            transform: translate(8px, -1px);
        }

        .header-sec {
            border-bottom: solid 1px #F2F2F2;
            background: #fff;
        }

        .fixed-nav {
            position: sticky;
            /* overflow: hidden;*/
            z-index: 10;
            width: 100%;
            top: 0;
            left: 0;
            box-shadow: 0 2px 10px -6px rgb(0, 0, 0, 0.4);
        }

        .fixed-nav nav {
            margin: 20px 0 0 0;
            height: 60px
        }

        nav ul.menu {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
        }

        nav .menu li {
            padding: 0 30px;
        }

        nav #menu-main .sub-menu>div {
            padding: 15px 0;

        }

        nav #menu-main .sub-menu> li {
            white-space : nowrap;
            /*transition : all 0.3s ;*/
        }


        nav .menu>li .sub-menu>li>a {
            font-size: 14px;
            line-height: 22px;
            padding: 5px 2px;
            font-weight: normal;
            display: block;
        }
        nav .menu>li {
            position: relative;
        }



        /*products style*/
        /*下拉展示*/
/* 鼠标触发后展示，位移恢复。 */
        .menu>li.menu-item-75:hover #sub-menudiv {
              /* display: block !important;  */
              opacity: 1 !important;
              transform: translateY(-25px);

        }
/* 鼠标未触发前，有位移Y轴偏离20PX。 */

        #menu-item-75>#sub-menudiv {
          /* display: none;   */
            position: absolute;
            left: -50%;
            top: 30px;
            padding: 0;
            margin: 0;
            z-index: 1;
            opacity: 0;
            transition: opacity 1s ease-in , transform 1.2s ease;
            /* transition: transform 2s ease; */
        }



        #menu-item-75>#sub-menudiv>ul {
            position: relative;
            background-color: white;
            border-top: 1px solid #0ea8ed;
            padding: 15px 0 15px 0;
            border-top: 1px solid #0ea8ed;
            border-bottom: 1px solid #0693e3;
            margin: 29px 0 16px;
        }

        #menu-item-75>#sub-menudiv ul::before {
            content: '';
            position: absolute;
            top: -6px;
            left: 25%;
            border-left: 68px solid transparent;
            border-right: 58px solid transparent;
            border-bottom: 5px solid #0693e3;
        }

        #sub-menudiv .sub-menu>li {
            display: block;
            line-height: 32px;
        }

        #sub-menudiv .sub-menu a {
            /*  color: #19479D;*/
            font-size: 14px;
            white-space: nowrap;
        }


        /*下拉展示子子分类*/
        /* #menu-item-75>#sub-menudiv ul.sub-menu li:hover ul.sub-menu {
            display: block !important;



        }




        #menu-item-75>#sub-menudiv ul.sub-menu ul.sub-menu {
            display: none;
            position: absolute;
            top: 0px;
            left: 100%;
            box-shadow: inset 0px -2px 1px #d0cece26, 1px 1px 1px #f6f9f926;
            padding: 15px 0;
            border-bottom: 1px solid #ccc;
            z-index: 1;

        } */

        /* 
#menu-item-75 > #sub-menudiv ul.sub-menu li a:hover { transform: translateX(5px); } 
*/
    </style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.slim.min.js" integrity="sha512-sNylduh9fqpYUK5OYXWcBleGzbZInWj8yCJAU57r1dpSK9tP2ghf/SRYCMj+KsslFkCOt3TvJrX2AV/Gc3wOqA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>
    
 


    <nav>
        <!--  main nav  -->
        <div class="menu-main-nav-container">
            <ul id="menu-main-nav" class="menu">
                <li id="menu-item-20"
                    class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-20">
                    <a href="/" aria-current="page">Home</a>
                </li>
                <li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><a
                        href="http://blog.xineol.com/sample-page-2/">About Us</a></li>
                <li id="menu-item-75"
                    class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-75">
                    <a href="http://blog.xineol.com/sharing/">Sharing</a>
                    <!-- <div id="sub-menudiv"> -->
                        <ul class="sub-menu">
                            <li id="menu-item-78"
                                class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-78"><a
                                    href="http://blog.xineol.com/sharing/industrial-supplies/">Industrial Supplies</a>
                            </li>
                            <li id="menu-item-79"
                                class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-79"><a
                                    href="http://blog.xineol.com/sharing/light-industry/">Light Industry</a></li>
                            <li id="menu-item-76"
                                class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-76"><a
                                    href="http://blog.xineol.com/sharing/chemicals-minerals/">Chemicals &amp;
                                    Minerals</a></li>
                            <li id="menu-item-80"
                                class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-80"><a
                                    href="http://blog.xineol.com/sharing/transportation-sporting-goods/">Transportation
                                    &amp; Sporting Goods</a></li>
                            <li id="menu-item-77"
                                class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-77"><a
                                    href="http://blog.xineol.com/sharing/home-security/">Home &amp; Security</a></li>
                        </ul>
                    <!-- </div> -->
                </li>
                <li id="menu-item-102"
                    class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-102"><a
                        href="http://blog.xineol.com/shops/">Shop</a></li>
                <li id="menu-item-74" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-74">
                    <a href="http://blog.xineol.com/blog/">Blog</a>
                </li>
            </ul>
        </div>
    </nav>

    <script>
        $(document).ready(function(){
            // 选择现有的ul元素
            var $ulElement = $("#menu-item-75 > ul");
    
            // 创建一个新的div并设置其ID
            var $newDiv = $("<div>", {id: "sub-menudiv"});
    
            // 将ul元素包装进新的div
            $ulElement.wrap($newDiv);
        });
    </script>



</body>
</HTML>